<template>
  <div class="orders">
      <Navs :navtitle="titles"></Navs>
      <div class="cotainer">
          <div class="content">
              <router-link class="input" to="orderss" tag="p">
                  <input type="text" placeholder="搜索订单编号、商品名称、供应商名称">
                  <img src="../../assets/sousuo.png" alt="">
              </router-link>
                 <div class="conWrap">
                    <van-tabs  title-active-color="#dd3333"  title-inactive-color="#666" :line-width="40" :line-height="1" scroll sticky :offset-top="36" >
                        <van-tab title="全部" >
                            <div class="wrap" v-for="(item,index) in data" :key="index">
                                <div class="company" >
                                    <div class="companyCon">
                                        <p class="companyName">
                                            <img src="../../assets/gongsi.png" alt="">
                                            蜂网
                                        </p>
                                        <p class="pending">{{item.orderStateDesc}}</p>
                                    </div>
                                </div>
                                <router-link to="" >
                                    <div class="companyGoods" v-for="(_item,_index) in item.orderGoodsVoList" :key="_index">
                                        <img :src=_item.picUrl alt="">
                                    </div>
                                </router-link>
                                <div class="goodsPrice">
                                    <p class="priceList">
                                        <span class="count">共{{item.goodsNum}}种</span>
                                        <span class="orderAmount">订单金额 :</span>
                                        <span class="price"><b>￥{{item.payableAmount}}</b></span>
                                    </p>
                                </div>
                                <div class="goodsPrice toPay">
                                    <p class="priceList clickToPay">
                                        <router-link tag="span" to="shopping">再次购买</router-link>
                                    </p>
                                </div>
                            </div>
                            
                        </van-tab>
                        <van-tab title="待付款">
                            <div v-if="datas.length>0">
                                <div class="wrap"   v-for="(item,index) in datas" :key="index" >
                                 <div class="company" >
                                    <div class="companyCon">
                                        <p class="companyName">
                                            <img src="../../assets/gongsi.png" alt="">
                                            {{item.dealerName}}
                                        </p>
                                        <p class="pending">待付款</p>
                                    </div>
                                 </div>
                                 <router-link to="" >
                                    <div class="companyGoods" v-for="(_item,_index) in item.orderGoodsVoList" :key="_index">
                                        <img :src=_item.picUrl alt="">
                                    </div>
                                 </router-link>
                                 <div class="goodsPrice">
                                    <p class="priceList">
                                        <span class="count">共{{item.goodsNum}}种</span>
                                        <span class="orderAmount">订单金额 :</span>
                                        <span class="price"><b>￥{{item.payableAmount}}</b></span>
                                    </p>
                                 </div>
                                 <div class="goodsPrice toPay">
                                    <p class="priceList clickToPay">
                                        <span>立即付款</span>
                                    </p>
                                 </div>
                             </div>
                            </div>
                             
                                <div class="kong" v-else>
                                    <img src="../../assets/dd.png" alt="">
                                    <p>你还没有相关订单</p>
                                </div>
                        </van-tab>
                        <van-tab title="待发货">
                              <div class="wrap" v-for="(item,index) in res" :key="index">
                                <div class="company" >
                                    <div class="companyCon">
                                        <p class="companyName">
                                            <img src="../../assets/gongsi.png" alt="">
                                            {{item.dealerName}}
                                        </p>
                                        <p class="pending">待发货</p>
                                    </div>
                                </div>
                                <router-link to="" >
                                    <div class="companyGoods" v-for="(_item,_index) in item.orderGoodsVoList" :key="_index">
                                        <img :src=_item.picUrl alt="">
                                    </div>
                                </router-link>
                                <div class="goodsPrice">
                                    <p class="priceList">
                                        <span class="count">共{{item.goodsNum}}种</span>
                                        <span class="orderAmount">订单金额 :</span>
                                        <span class="price"><b>￥{{item.payableAmount}}</b></span>
                                    </p>
                                </div>
                                <div class="goodsPrice toPay">
                                    <p class="priceList clickToPay">
                                        <span>取消订单</span>
                                    </p>
                                </div>
                            </div>
                        </van-tab>
                        <van-tab title="待收货">
                             <div class="wrap" v-for="(item,index) in ress" :key="index">
                                <div class="company" >
                                    <div class="companyCon">
                                        <p class="companyName">
                                            <img src="../../assets/gongsi.png" alt="">
                                            {{item.dealerName}}
                                        </p>
                                        <p class="pending">待收货</p>
                                    </div>
                                </div>
                                <router-link to="" >
                                    <div class="companyGoods" v-for="(_item,_index) in item.orderGoodsVoList" :key="_index">
                                        <img :src="_item.picUrl" alt="">
                                    </div>
                                </router-link>
                                <div class="goodsPrice">
                                    <p class="priceList">
                                        <span class="count">共{{item.goodsNum}}种</span>
                                        <span class="orderAmount">订单金额 :</span>
                                        <span class="price"><b>￥{{item.payableAmount}}</b></span>
                                    </p>
                                </div>
                                <div class="goodsPrice toPay">
                                    <p class="priceList clickToPay">
                                        <span>查看物流</span>
                                    </p>
                                </div>
                            </div>
                        </van-tab>
                        <van-tab title="已完成">
                            <div class="wrap" v-for="(item,index) in resul" :key="index">
                                <div class="company" >
                                    <div class="companyCon">
                                        <p class="companyName">
                                            <img src="../../assets/gongsi.png" alt="">
                                            {{item.dealerName}}
                                        </p>
                                        <p class="pending">已完成</p>
                                    </div>
                                </div>
                                <router-link to="" >
                                    <div class="companyGoods" v-for="(_item,_index) in item.orderGoodsVoList" :key="_index">
                                        <img :src=_item.picUrl alt="">
                                    </div>
                                </router-link>
                                <div class="goodsPrice">
                                    <p class="priceList">
                                        <span class="count">共{{item.goodsNum}}种</span>
                                        <span class="orderAmount">订单金额 :</span>
                                        <span class="price"><b>￥{{item.payableAmount}}</b></span>
                                    </p>
                                </div>
                                <div class="goodsPrice toPay">
                                    <p class="priceList clickToPay">
                                        <span>查看物流</span>
                                    </p>
                                </div>
                            </div>
                          </van-tab>  
                        
                        
                        </van-tabs>
                </div>
                  
                    <!-- <div class="kong">
                        <img src="../assets/dd.png" alt="">
                        <p>你还没有相关订单</p>
                    </div> -->
              
          </div>
      </div>
      
  </div>
</template>

<script>
import Navs from '../../components/Navbar'
import Vue from 'vue'
import Vant from 'vant';
import { Tab, Tabs } from 'vant';
Vue.use(Tab).use(Tabs);
import axios from 'axios'
export default {
    components:{
        Navs,
    },
    data(){
        return{
          titles:'我的订单',
          data:[],
          datas:[],
          res:[],
          ress:[],
          resul:[]
        }
    },
    methods:{
        backs(){
            this.$router.back(-1)
        },
        aaa(){
            alert(111)
        },
       getAllOrder(){
                    let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getAllOrder',{
                           merchantId: 7462, pageNum: 1, pageSize: 10, siteId: 5
                    },
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.data=res.data.result.list
                        // console.log("全部",res.data.result)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
       },
       getOrderPendingPayment(){
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getOrderPendingPayment',{
                           merchantId: 7462, pageNum: 1, pageSize: 10, siteId: 5
                    },
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.datas=res.data.result.list
                        // console.log("待付款",res.data.result)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
       },
       getToSend(){
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getToSend',{
                           merchantId: 7462, pageNum: 1, pageSize: 10, siteId: 5
                    },
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.res=res.data.result.list
                        // console.log("待发货",res.data.result)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
       },
       getToReceived(){
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getToReceived',{
                           merchantId:this.$store.state.merchantInfo.merchantId,
                            pageNum: 1, 
                            pageSize: 10, 
                            siteId: this.$store.state.stationId
                    },
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.ress=res.data.result.list
                        // console.log("待收货",res.data.result)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
       },
       getOrderCompleted(){
            let headers;
                    if (this.$store.state.token) {
                        headers = {
                        token: this.$store.state.token,
                        userId: this.$store.state.userInfo.id
                        };
                    } else {
                        headers = {};
                    }
                    this.$http.post('https://web-gateway.newbeescm.com/b2b-app-web/getOrderCompleted',{
                           merchantId: 7462, pageNum: 1, pageSize: 10, siteId: 5
                    },
                    {
                        headers,
                    }
                    )
                    .then(res=>{
                        this.resul=res.data.result.list
                        // console.log("已完成",res.data.result)
                    })
                    .catch(err=>{
                        console.log(err)
                    })
       },
       
    },
    created(){
           this.getAllOrder()
           this.getOrderPendingPayment()
           this.getToSend()
           this.getToReceived()
           this.getOrderCompleted()
       }
}

</script>
<style scoped lang="scss">
.cotainer{
    position: absolute;
    top: 0.43rem;
    left: 0;
    bottom: 0;
    background: #F2F1F6;
    width: 100%;
    }
 .content{
  width:100%;
  .input{
      width:100%;
      height:0.4rem;
      background: red;
      display: flex;
      align-items: center;
      justify-content: center;
      position: sticky;
       top: 0;
        left: 0;
        z-index: 99;
      input{
          width:90%;
          height:0.25rem;
          border-radius:0.1rem; 
          border:1px solid #ccc;
          outline: none;
          font-size:0.12rem;
          text-indent:0.3rem;
          position: relative;
       }
       img{
           width:0.13rem;
           height:0.13rem;
           position:absolute;
           left: 7%;
           top: 0.13rem;
       }
  }
}
.kong{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F2F1F6;
    img{
        width:0.5rem;
        height:0.5rem;
         margin-top:2.1rem;
    }
    p{
        margin-top:0.1rem;
        font-size:0.12rem;
        color:#ccc;
    }
}
.conWrap{
        width:100%;
        height:100%;
        background: #f8f8f8;
        // margin-top:0.4rem;
        .van-tabs__content{
            padding-top:0.5rem;
            .van-tab__pane{
                .wrap{
                    .company{
                        width:100%;
                        height:0.4rem;
                        background:#fff;
                        margin-top:0.1rem;
                        // border-bottom:0.01rem solid red;
                        .companyCon{
                            height:0.4rem;
                            margin:0 0.14rem;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            .companyName{
                                font-size: 0.13rem;
                                color: #333333;
                                display: flex;
                                align-items: center;
                                img{
                                    width:0.16rem;
                                    height:0.15rem;
                                    margin-right:0.05rem
                                }
                            }
                            .pending{
                                font-size: 0.12rem;
                                color: #DD3333;
                            }
                        }
                    }
                    a{
                         display: flex;
                         justify-content: flex-start;
                         .companyGoods{
                            margin:0 0 0 0.14rem;
                            height:0.68rem;
                            display: flex;
                            // justify-content: flex-start;
                            align-items: center;
                            img{
                                width:0.54rem;
                                height:0.54rem;
                                // margin-right:0.11rem;
                            }
                    }
                    }
                   
                    .goodsPrice{
                        width:100%;
                        height:0.4rem;
                        background:#fff;
                        border-bottom:0.01rem solid #eee;
                        .priceList{
                            height:100%;
                            margin-right:0.14rem;
                            float:right;
                            display: flex;
                            // justify-content: flex-start;
                            align-items: center;
                            font-size:0.12rem;
                            color:#666;
                            .orderAmount{
                                margin:0 0.1rem;
                            }
                            .price{
                                b{
                                    font-size:0.16rem;
                                    color:#333333;
                                    font-weight:none
                                }
                            }
                        }
                    }
                    .toPay{
                        border:none;
                        // margin-bottom:0.2rem;
                        .clickToPay{
                            span{
                                border:0.01rem solid #DD3333;
                                padding:0.05rem;
                                font-size: 0.12rem;
                                color: #DD3333;
                                border-radius:0.02rem
                            }
                        }
                    }
                }
            }
        }
}
</style>